import React, { useEffect, useState } from 'react'
import axios from 'axios'
import { Avatar, List } from 'antd-mobile'
import { NavBar, Space, Toast } from 'antd-mobile'
import { SearchOutline, MoreOutline } from 'antd-mobile-icons'
import { useNavigate } from 'react-router-dom'
import TabBar1 from '../../../components/TabBar/TabBar'
import { list_user } from '../../../redux/Chat_reducer'
import { useDispatch } from 'react-redux';

export default function Message() {

    const Dispatch = useDispatch()
    const Navigate = useNavigate()

    useEffect(() => {
        Get_List()
    }, [])

    const [list, setList] = useState([])

    const Get_List = async () => {
        await axios.get('http://47.116.116.42:3000/getlist2').then((res) => {
            setList(res.data.data)
        })
    }

    const right = (
        <div style={{ fontSize: 24 }}>
            <Space style={{ '--gap': '16px' }}>
                <SearchOutline />
                <MoreOutline />
            </Space>
        </div>
    )

    const back = () =>
        Toast.show({
            content: '点击了返回区域',
            duration: 1000,
        })

    const render_list = () => {
        return list.map(item => {
            return <List key={item._id}>
                <List.Item onClick={() => {
                    Navigate('/business/chat')
                    Dispatch(list_user(item.san))
                }}
                    prefix={<Avatar src={item.yi} />}
                    description='Deserunt dolor ea eaque eos'
                >
                    {item.er}
                </List.Item>
            </List>
        })
    }

    return (
        <div>
            <NavBar right={right} onBack={back}>
                聊天
            </NavBar>

            {render_list()}
            <TabBar1></TabBar1>
        </div>
    )
}

